﻿<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
	<title>mubai管理系统</title>
	<meta name="keywords" content="mubai,mubai开源,mubai框架,mubai系统,mubai">
	<meta name="description" content="mubai基于SpringBoot2.0的权限管理系统 易读易懂、界面简洁美观。 核心技术采用Spring、MyBatis、Shiro没有任何其它重度依赖">
	<!--[if lt IE 9]>
	<meta http-equiv="refresh" content="0;ie.html"/>
	<![endif]-->
	<link rel="shortcut icon" href="../static/favicon.ico" th:href="@{favicon.ico}"/>
	<style>
		#win10-login {
			background: url('../img/wallpapers/login.jpg') no-repeat fixed;
			width: 100%;
			height: 100%;
			background-size: 100% 100%;;
			position: fixed;
			z-index: -1;
			top: 0;
			left: 0;
		}

		#win10-login-box {
			width: 300px;
			overflow: hidden;
			margin: 0 auto;
		}

		.win10-login-box-square {
			width: 105px;
			margin: 0 auto;
			border-radius: 50%;
			background-color: darkgray;
			position: relative;
			overflow: hidden;
		}

		.win10-login-box-square::after {
			content: "";
			display: block;
			padding-bottom: 100%;
		}

		.win10-login-box-square .content {
			position: absolute;
			width: 100%;
			height: 100%;
		}

		input {
			width: 90%;
			display: block;
			border: 0;
			margin: 0 auto;
			line-height: 36px;
			font-size: 20px;
			padding: 0 1em;
			border-radius: 5px;
			margin-bottom: 11px;
		}

		.login-username, .login-password {
			width: 91%;
			font-size: 13px;
			color: #999;
		}

		.login-password {
			width: calc(91% - 54px);
			-webkit-border-radius: 2px 0 0 2px;
			-moz-border-radius: 2px 0 0 2px;
			border-radius: 5px 0 0 5px;
			margin: 0px;
			float: left;
		}

		.login-submit {
			margin: 0px;
			float: left;
			-webkit-border-radius: 0 5px 5px 0;
			-moz-border-radius: 0 5px 5px 0;
			border-radius: 0 5px 5px 0;
			background-color: #009688;
			width: 54px;
			display: inline-block;
			height: 36px;
			line-height: 36px;
			padding: 0 auto;
			color: #fff;
			white-space: nowrap;
			text-align: center;
			font-size: 14px;
			border: none;
			cursor: pointer;
			opacity: .9;
			filter: alpha(opacity=90);

		}
	</style>
</head>
<body>
<div id="win10-login">
	<div style="height: 10%;min-height: 120px"></div>
	<div id="win10-login-box">
		<div class="win10-login-box-square">
			<img src="../img/avatar.jpg"  th:src="@{/img/avatar.jpg}" class="content"/>
		</div>
		<p style="font-size: 24px;color: white;text-align: center">您好!塞巴斯酱</p>
		<form id="long10Form">
			<!--用户名-->
			<input type="text" name="username" placeholder="请输入登录名" class="login-username"  value="admin">
			<!--密码-->
			<input type="password" name="password" placeholder="请输入密码" class="login-password" value="admin123">
			<!--登陆按钮-->
			<button id="btn-login" class="login-submit">登录</button>
		</form>
	</div>
</div>
</body>
<script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; </script>
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<!-- 验证插件 -->
<script src="../static/ajax/libs/validate/jquery.validate.min.js" th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script src="../static/ajax/libs/validate/messages_zh.min.js" th:src="@{/ajax/libs/validate/messages_zh.min.js}"></script>
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script src="../static/mubai/js/mubai-ui.js" th:src="@{/mubai/js/mubai-ui.js?v=3.0.0}"></script>
<script th:inline="javascript">
	$(function() {
		validateRule();
	});

	$.validator.setDefaults({
		submitHandler: function() {
			login();
		}
	});

	function login() {
		var username = $.common.trim($("input[name='username']").val());
		var password = $.common.trim($("input[name='password']").val());
		$.ajax({
			type: "post",
			url: ctx + "login",
			data: {
				"username": username,
				"password": password
			},
			success: function(r) {
				if (r.code == 200) {
					location.href = ctx + 'index';
				} else {
					$.modal.msg(r.note);
				}
			}
		});
	}

	function validateRule() {
		var icon = "<i class='fa fa-times-circle'></i> ";
		$("#long10Form").validate({
			rules: {
				username: {
					required: true
				},
				password: {
					required: true
				}
			},
			messages: {
				username: {
					required: icon + "请输入您的用户名",
				},
				password: {
					required: icon + "请输入您的密码",
				}
			}
		})
	}

</script>
</html>